
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>1、倒计时</title>
</head>

<body>
  <div class="time_box">
    <span class="hour time">01</span> :
    <span class="mintue time">0</span> :
    <span class="second time">0</span>
  </div>
  <button type="button">开始</button>


  <script>
    var btn = document.querySelector('button');
    var tSpans = document.querySelectorAll('.time');
    var isStart = false;
    var timer = null;
    btn.onclick = function () {
      if (isStart) {
        this.innerHTML = '开始';
        clearInterval(timer);
      } else {
        this.innerHTML = '暂停';
        timer = setInterval(getTime, 1000);
      }
      isStart = !isStart;
    }
    var allSeconds = 0;
    function getTime() {
      allSeconds = tSpans[0].innerHTML * 3600 + tSpans[1].innerHTML * 60 + tSpans[2].innerHTML * 1;
      allSeconds--;
      if (allSeconds == 0) {
        clearInterval(timer);
        btn.innerHTML = '计时结束';
        btn.disabled = true;
      }
      tSpans[0].innerHTML = addPrefix0(Math.floor(allSeconds / 3600));
      tSpans[1].innerHTML = addPrefix0(Math.floor(allSeconds / 60%60));
      tSpans[2].innerHTML = addPrefix0(allSeconds % 60);
    }
    function addPrefix0(value) {
      return value < 10 ? '0' + value : value;
    }
  </script>
</body>

</html>